window.setTimeout(function () {
    $('head').append(`<style>
.ksa-piceditor-container {background: #222;color: #636363;display: flex;width: 100%;height: 100%;}
        .ksa-piceditor-tools {display: flex;flex-direction: column;gap: 10px;}
        .ksa-piceditor-canvas-container {width: 100%;height: 100%;flex: 1;position: relative;overflow: hidden;display: flex;align-items: center;justify-content: center;background: #111111;}
        .ksa-piceditor-canvas-container:focus {outline: none;}
        .ksa-piceditor-canvas-wrapper {position: absolute;transform-origin: 0 0;}
        .effects {display: flex;flex-direction: column;gap: 10px;padding: 10px;border: 1px solid #ccc;}
        .ksa-piceditor-mode-group {display: flex;}
        .ksa-piceditor-mode-group > div {padding:5px;border-right: #353535 1px solid;}
        .ksa-piceditor-mode-group > div[active] {background: #111;color: #c7c7c7;}
        .selected-path {outline: 2px dashed #0066ff;}
        .ksa-piceditor-brush-settings {display: flex;flex-direction: column;border: 1px solid #333;cursor: default;}
        .ksa-piceditor-brush-settings-item {background: #111;padding: 10px;}
        .ksa-piceditor-brush-settings-item-li {padding: 5px 0;display: flex;}
        .ksa-piceditor-brush-settings-item-li > label {display: block;width:80px;}
        .ksa-piceditor-brush-settings-item-li > div {width: 100%;flex: 1;}
        .ksa-piceditor-brush-settings-item-li > span {display: block;width: 70px;text-align: center;}
        .ksa-piceditor-brush-settings-item-li > span input {background: none;border: none;width: 100%;color:inherit;text-align: center;}
        .ksa-piceditor-delete-btn {position: absolute;background: red;color: white;border: none;border-radius: 50%;width: 20px;height: 20px;line-height: 20px;text-align: center;cursor: pointer;font-size: 12px;transform: translate(-50%, -50%);z-index: 999;}
        .ksa-piceditor-canvas-wrapper-canvas-temp {position: absolute;left: 0;top: 0;z-index: 2}
        .ksa-piceditor-btn {height: 26px;line-height: 26px;padding: 0 5px;display: inline-block;overflow: hidden;border: #555 1px solid;border-radius: 4px;background: #262935;cursor: pointer;user-select: none;}
        .ksa-piceditor-btn:hover {border-color: #666;color: #999;}
        .ksa-piceditor-btn[upload] {position: relative;overflow: hidden;padding: 0;}
        .ksa-piceditor-btn[upload] label {display: block;padding: 0 5px;cursor: pointer;}
        .ksa-piceditor-btn[upload] input {opacity: 0;position: absolute;width: 0;height: 0}
</style>`);
}, 10);

Vue.component('pic-editor', {
        template: `<div class="ksa-piceditor-container">
            <div class="ksa-piceditor-tools">

                <div style="padding: 5px 5px 0; text-align: center;">
                    <div class="ksa-piceditor-btn" upload><label><span icon="file-image"></span>上传<input type="file" accept="image/*" @change="handleImageUpload"></label></div>
                    <div class="ksa-piceditor-btn" @click="undo"><span icon="arrow-go-back"></span>撤销</div>
                    <div class="ksa-piceditor-btn" @click="clearEmpty"><span icon="brush-2"></span>清空</div>
                </div>

                <div class="ksa-piceditor-brush-settings">
                    <div class="ksa-piceditor-mode-group">
                        <div @click="changeMode('draw')" :active="mode == 'draw'">画笔</div>
                        <div @click="changeMode('brush')" :active="mode == 'brush'">毛笔</div>
                        <div @click="changeMode('select')" :active="mode == 'select'">选择</div>
                        <div @click="changeMode('lasso')" :active="mode == 'lasso'">套索</div>
                    </div>
                    <div class="ksa-piceditor-brush-settings-item">
                        <div v-if="mode == 'draw' || mode == 'brush'">
                            <div class="ksa-piceditor-brush-settings-item-li">
                                <label>画笔颜色:</label>
                                <div><input type="color" value="#000000" v-model="Brush.color" @input="updateBrushSettings"></div>
                                <span>{{Brush.color}}</span>
                            </div>
                            <div class="ksa-piceditor-brush-settings-item-li">
                                <label>画笔粗细:</label>
                                <div><input type="range" min="1" max="50" v-model="Brush.width" @input="updateBrushSettings"></div>
                                <span><input type="number" v-model="Brush.width" min="1" max="50" @input="updateBrushSettings"></span>
                            </div>
                            <div class="ksa-piceditor-brush-settings-item-li">
                                <label>画笔透明度:</label>
                                <div><input type="range" min="1" max="100" v-model="Brush.opacity" @input="updateBrushSettings"></div>
                                <span><input type="number" v-model="Brush.opacity" min="1" max="100" @input="updateBrushSettings"></span>
                            </div>
                        </div>
                        <div v-if="mode == 'lasso'">
                            <div class="ksa-piceditor-brush-settings-item-li">
                                <label>羽化:</label>
                                <div><input type="range" min="0" max="50" v-model="featherValue"></div>
                                <span><input type="number" v-model="featherValue" min="0" max="50"></span>
                            </div>
                            <div class="ksa-piceditor-brush-settings-item-li">
                                <label>羽化填充:</label>
                                <div><input type="color" value="#ffffff" v-model="featherColor"></div>
                                <span>{{featherColor}}</span>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="ksa-piceditor-brush-settings">
                    <div class="ksa-piceditor-mode-group">
                        <div active>图片效果</div>
                    </div>
                    <div class="ksa-piceditor-brush-settings-item">
                        <div>
                            <div class="ksa-piceditor-brush-settings-item-li">
                                <label>高斯模糊:</label>
                                <div><input type="range" min="0" max="20" v-model="blurValue" @input="applyEffects"></div>
                                <span><input type="number" v-model="blurValue" min="0" max="20" @keydown.enter.stop="applyEffects"></span>
                            </div>
                            <div class="ksa-piceditor-brush-settings-item-li">
                                <label>饱和度:</label>
                                <div><input type="range" min="0" max="200" v-model="saturationValue" @input="applyEffects"></div>
                                <span><input type="number" v-model="saturationValue" min="0" max="200" @keydown.enter.stop="applyEffects"></span>
                            </div>
                            <div class="ksa-piceditor-brush-settings-item-li">
                                <label>亮度:</label>
                                <div><input type="range" min="0" max="200" v-model="brightnessValue" @input="applyEffects"></div>
                                <span><input type="number" v-model="brightnessValue" min="0" max="200" @keydown.enter.stop="applyEffects"></span>
                            </div>
                            <div class="ksa-piceditor-brush-settings-item-li">
                                <label>反向:</label>
                                <div><label><input type="checkbox" min="0" max="200" v-model="reversalColorValue" @change="reversalColorValueChange">是</label></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ksa-piceditor-canvas-container" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp" @wheel="canvasWrapperZoom" @keydown="handleKeyDown" @contextmenu="handleRightClickDisabled" tabindex="-1">
                <div class="ksa-piceditor-canvas-wrapper">
                    <canvas class="ksa-piceditor-canvas-wrapper-canvas"></canvas>
                    <canvas class="ksa-piceditor-canvas-wrapper-canvas-temp"></canvas>
                </div>
            </div>
        </div>`,
        data(){
            return {
                mode : 'draw', // 当前绘画模式，包括draw, brush, select, lasso
                currentImage : null, // 当前显示的图片
                originalImage : null, // 保存原始图片
                isDrawing : false, // 是否正在绘画

                selectedPathIndex : -1, // 当前选中的路径索引
                dragStartPos : null, // 拖拽开始的位置
                lastPoint : null, // 最后一个点的位置
                lastTime : null, // 最后一个点的时间
                backgroundColor : '#ffffff', // 背景颜色
                Brush : {
                    width : 1, // 当前画笔线宽
                    color : '#000000', // 当前画笔颜色
                    opacity : 100, //当前画笔透明度
                },
                scale : 1, // 当前缩放比例
                translateX : 0, // 当前水平平移距离
                translateY : 0, // 当前垂直平移距离
                isDragging : false, // 是否正在拖拽
                selectionBox : null, // 选择框的位置
                selectionStart : null, // 选择开始的位置
                selectedPaths : new Set(), // 选中的路径集合
                pressStartTime : null, // 按下开始的时间
                featherValue : 0, // 羽化值
                featherColor : '#ffffff', // 羽化颜色
                reversalColorValue : false, //是否反向

                // 效果相关状态
                blurValue : 0, // 模糊值
                saturationValue : 100, // 饱和度值
                brightnessValue : 100, // 亮度值
                polygon : {
                    isDrawing : false, // 是否正在绘制多边形
                    isComplete : false, // 是否完成多边形绘制
                    lineColor : 'red', // 线条颜色
                    lineWidth : 1,  // 线条宽度
                }
            };
        },
        mounted(){
            this.dom_canvas_container = this.$el.querySelector('.ksa-piceditor-canvas-container');
            this.dom_canvas_wrapper = this.$el.querySelector('.ksa-piceditor-canvas-wrapper');
            this.dom_canvas = this.$el.querySelector('canvas.ksa-piceditor-canvas-wrapper-canvas');
            this.dom_ctx = this.dom_canvas.getContext('2d');
            this.dom_canvas_temp = this.$el.querySelector('canvas.ksa-piceditor-canvas-wrapper-canvas-temp');
            this.dom_ctx_temp = this.dom_canvas_temp.getContext('2d');

            this.updateBrushSettings();

            this.polygon_points = []; // 存储当前正在绘制多边形的点
            this.polygon_GroupPoint = []; //多边形组信息 item=对应多边形点坐标信息
            this.paths = []; // 所有路径的集合
            this.currentPath = []; // 当前路径的点集
            this.canvas_update_callbacl_timmer = null; //画布更新回调计时器对象
            this.$emit('init_call_func', this);
        },
        props: {
            'update_call_canvas' : {
                type : String,
                required : false
            }
        },
        methods : {
            //父组件回调函数
            callFuncUpdate(){
                this.canvas_update_callbacl_timmer && window.clearTimeout(this.canvas_update_callbacl_timmer);
                this.canvas_update_callbacl_timmer = window.setTimeout(()=>{
                    try {
                        this.$emit('update_call_cunc', this.dom_canvas);
                    }catch (e) {

                    }
                    this.copyCanvasContent();
                });
            },
            //复制内容到父组件指定的canvas
            copyCanvasContent() {
                //this.update_call_canvas是一个选择器字符串
                if(!this.update_call_canvas){
                    return;
                }
                const update_call_canvas = $(this.update_call_canvas);

                if(!update_call_canvas.length){
                    return;
                }
                const sourceCanvas = this.dom_canvas;
                const targetCanvas = update_call_canvas[0];
                const targetCtx = targetCanvas.getContext('2d');
                //重设目标canvas大小
                targetCanvas.width = sourceCanvas.width;
                targetCanvas.height = sourceCanvas.height;
                // 清空目标画布
                targetCtx.clearRect(0, 0, targetCanvas.width, targetCanvas.height);

                // 复制源画布内容到目标画布
                targetCtx.drawImage(sourceCanvas, 0, 0);
                update_call_canvas.trigger('change');
            },
            changeMode(name=''){
                this.mode = name;
                this.selectedPathIndex = -1;
                this.selectedPaths.clear();
                this.removeDeleteButtons();
                this.drawImage();
            },
            // 调整画布大小
            resizeCanvas() {
                if (this.currentImage) {
                    // 根据图片尺寸设置canvas大小
                    let width = this.currentImage.width;
                    let height = this.currentImage.height;

                    // 计算缩放比例
                    const maxWidth = this.dom_canvas_container.clientWidth;
                    const maxHeight = this.dom_canvas_container.clientHeight;
                    const ratio = Math.min(maxWidth / width, maxHeight / height);

                    if (ratio < 1) {
                        width *= ratio;
                        height *= ratio;
                    }

                    this.dom_canvas.width = width;
                    this.dom_canvas.height = height;
                    this.dom_canvas_temp.width = width;
                    this.dom_canvas_temp.height = height;
                } else {
                    this.dom_canvas.width = 800;
                    this.dom_canvas.height = 600;
                    this.dom_canvas_temp.width = this.dom_canvas.width;
                    this.dom_canvas_temp.height = this.dom_canvas.height;
                }
                this.drawImage();
            },
            // 处理鼠标按下事件
            handleMouseDown(e) {
                if (e.button === 2) { // 右键
                    this.isDragging = true;
                    this.dragStartPos = { x: e.clientX - this.translateX, y: e.clientY - this.translateY };
                    e.preventDefault();
                    return;
                }
                const rect = this.dom_canvas.getBoundingClientRect();
                // 计算相对于canvas的坐标
                const x = (e.clientX - rect.left) / this.scale;
                const y = (e.clientY - rect.top) / this.scale;

                if(this.mode === 'lasso'){
                    this.polygon_start(x, y);
                    return;
                }
                this.isDrawing = true;

                if (this.mode === 'select') {
                    this.selectionStart = { x: e.clientX, y: e.clientY };
                    this.selectionBox = { x: e.clientX, y: e.clientY };
                    this.selectedPaths.clear();
                    this.removeDeleteButtons();
                    return;
                }

                if(this.mode === 'draw' || this.mode === 'brush'){

                    this.pressStartTime = Date.now();
                    this.currentPath = {
                        type : this.mode,
                        color : this.currentBrushColor,
                        width : this.currentLineWidth,
                        points : [{
                            x,
                            y,
                            width: this.currentLineWidth,
                        }]
                    };
                    this.lastPoint = { x, y };
                    this.lastTime = Date.now();
                }

            },
            // 处理鼠标移动事件
            handleMouseMove(e) {
                //拖动画布
                if (this.isDragging) {
                    this.translateX = e.clientX - this.dragStartPos.x;
                    this.translateY = e.clientY - this.dragStartPos.y;
                    this.canvasWrapperUpdate(); // 更新canvasWrapper的位置和缩放
                    return;
                }
                if(this.mode === 'lasso'){
                    return;
                }

                const rect = this.dom_canvas.getBoundingClientRect();
                const x = (e.clientX - rect.left) / this.scale;
                const y = (e.clientY - rect.top) / this.scale;



                if (!this.isDrawing) return;



                if (this.mode === 'select') {
                    this.selectionBox = { x: e.clientX, y: e.clientY };
                    this.drawImage();
                    return;
                }

                if (this.mode === 'brush') {
                    const currentTime = Date.now();
                    const speed = Math.sqrt(
                        Math.pow(x - this.lastPoint.x, 2) +
                        Math.pow(y - this.lastPoint.y, 2)
                    ) / (currentTime - this.lastTime);

                    this.currentPath.points.push({
                        x,
                        y,
                        width: this.calculateBrushWidth(speed),
                        opacity: 1,
                    });

                    this.lastPoint = { x, y };
                    this.lastTime = currentTime;
                } else {
                    this.currentPath.points.push({ x, y });
                }
                this.canvasClearEmpty(true);
                this.drawPathLine(this.currentPath, true);
            },
            // 处理鼠标松开事件
            handleMouseUp(e) {
                if (e.button === 2) {
                    this.isDragging = false;
                    return;
                }
                const rect = this.dom_canvas.getBoundingClientRect();
                const x = (e.clientX - rect.left) / this.scale;
                const y = (e.clientY - rect.top) / this.scale;

                if(this.mode === 'lasso'){
                    this.polygon_continue(x, y);
                    return;
                }
                if (!this.isDrawing) return;

                if (this.mode === 'select' && this.selectionBox) {
                    // 计算选择框在画布坐标系中的位置
                    const startX = (this.selectionStart.x - rect.left) / this.scale;
                    const startY = (this.selectionStart.y - rect.top) / this.scale;
                    const endX = (this.selectionBox.x - rect.left) / this.scale;
                    const endY = (this.selectionBox.y - rect.top) / this.scale;

                    const minX = Math.min(startX, endX);
                    const maxX = Math.max(startX, endX);
                    const minY = Math.min(startY, endY);
                    const maxY = Math.max(startY, endY);

                    // 检查每条路径是否与选择框相交
                    this.paths.forEach((path, index) => {
                        const bounds = this.getPathBounds(path);
                        // 只要路径边界与选择框有交集就选中
                        if (!(bounds.maxX < minX || bounds.minX > maxX ||
                            bounds.maxY < minY || bounds.minY > maxY)) {
                            this.selectedPaths.add(index);
                        }
                    });

                    this.selectionBox = null;
                    this.selectionStart = null;
                } else if (this.currentPath.points.length > 0) {
                    this.pathsAdd(this.currentPath);
                }

                this.isDrawing = false;
                this.currentPath = {};


                this.canvasClearEmpty(true);
                this.drawImage();
            },
            handleKeyDown(e){
                if(e.key === 'Enter'){
                    if(this.polygon.isDrawing){
                        this.polygon_end();
                    }
                } else if (e.key === 'Escape') {
                    if(this.polygon.isDrawing){
                        this.polygon_cancel();
                    }
                }

            },
            handleRightClickDisabled(e) {
                e.preventDefault();
            },
            // 清空画布并重置为初始状态
            clearEmpty(isConfirm=true, callFunc=null){
                const self = this;
                function _f(){
                    self.currentImage = null; // 当前显示的图片
                    self.originalImage = null; // 保存原始图片
                    self.scale = 1; // 当前缩放比例
                    self.translateX = 0; // 当前水平平移距离
                    self.translateY = 0; // 当前垂直平移距离
                    self.polygon_points = []; // 存储当前正在绘制多边形的点
                    self.polygon_GroupPoint = []; //多边形组信息 item=对应多边形点坐标信息
                    self.paths = []; // 所有路径的集合
                    self.currentPath = []; // 当前路径的点集
                    self.canvasWrapperUpdate();
                    self.canvasClearEmpty(true);
                    self.canvasClearEmpty();
                    self.updateDeleteButtons();
                    self.callFuncUpdate();
                    callFunc && callFunc(self);
                }
                if(isConfirm){
                    $.Dialog('confirm', '操作提示', '确认要清空画布吗？', _f);
                }else {
                    _f();
                }
            },
            //画布父级缩放
            canvasWrapperZoom(e){
                e.preventDefault();
                const rect = this.dom_canvas.getBoundingClientRect();
                const mouseX = e.clientX - rect.left;
                const mouseY = e.clientY - rect.top;

                // 计算鼠标在画布上的实际位置
                const canvasX = (mouseX - this.translateX) / this.scale;
                const canvasY = (mouseY - this.translateY) / this.scale;

                // 更新缩放比例
                const oldScale = this.scale;
                let newScale = this.scale + (e.deltaY > 0 ? -0.1 : 0.1);
                newScale = Math.max(0.5, Math.min(20, newScale));

                // 由于transform-origin:0 0,需要根据缩放比例变化调整平移量
                const scaleDiff = newScale - oldScale;
                this.translateX = this.translateX - (mouseX * (scaleDiff / oldScale));
                this.translateY = this.translateY - (mouseY * (scaleDiff / oldScale));
                this.scale = newScale;


                this.canvasWrapperUpdate();
            },
            //画布父级位置更新
            canvasWrapperUpdate(){
                this.dom_canvas_wrapper.style.transform = `translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale})`;
            },
            loadImg(img){
                this.currentImage = img;
                this.originalImage = img; // 保存原始图片
                this.resizeCanvas();
                this.callFuncUpdate();
            },
            // 处理图片上传
            handleImageUpload(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = (event) => {
                        const img = new Image();
                        img.onload = () => {
                            this.loadImg(img);
                        };
                        img.src = event.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            },
            readCanvas_To_Image(canvas){
                const img = new Image();
                img.onload = () => {
                    this.loadImg(img);
                };
                img.src = canvas.toDataURL('image/png'); // 将 canvas 内容转换为数据 URL
            },
            reversalColorValueChange(){
              this.reversalColorValue = !this.reversalColorValue;
              this.applyEffects();
            },
            // 应用效果
            applyEffects() {
                if (!this.originalImage) return;

                const tempCanvas = document.createElement('canvas');
                tempCanvas.width = this.dom_canvas.width;
                tempCanvas.height = this.dom_canvas.height;
                const tempCtx = tempCanvas.getContext('2d');

                // 从原始图像开始应用效果
                tempCtx.drawImage(this.originalImage, 0, 0, tempCanvas.width, tempCanvas.height);

                // 应用模糊
                if (this.blurValue > 0) {
                    tempCtx.filter = `blur(${this.blurValue}px)`;
                    tempCtx.drawImage(tempCanvas, 0, 0);
                }

                // 应用饱和度
                if (this.saturationValue !== 100) {
                    tempCtx.filter = `saturate(${this.saturationValue}%)`;
                    tempCtx.drawImage(tempCanvas, 0, 0);
                }

                // 应用亮度
                if (this.brightnessValue !== 100) {
                    tempCtx.filter = `brightness(${this.brightnessValue}%)`;
                    tempCtx.drawImage(tempCanvas, 0, 0);
                }

                // 应用颜色反转
                tempCtx.filter = !this.reversalColorValue ? 'invert(100%)' : 'invert(0%)';
                tempCtx.drawImage(tempCanvas, 0, 0);

                // 重置滤镜并更新当前图像
                this.dom_ctx.filter = 'none';
                this.currentImage = tempCanvas;
                this.drawImage();
            },
            // 更新画笔设置
            updateBrushSettings() {
                const rgb = this.hexToRgb(this.Brush.color);
                const opacity = this.Brush.opacity / 100;
                this.currentBrushColor = `rgba(${rgb.r},${rgb.g},${rgb.b},${opacity})`;
                this.currentLineWidth = parseInt(this.Brush.width);
            },
            // 计算毛笔效果宽度
            calculateBrushWidth(speed) {

                // 获取基础画笔宽度
                const baseWidth = this.currentLineWidth;
                const pressTime = Date.now() - this.pressStartTime;
                const pressureEffect = Math.min(pressTime / 1000, 2); // 最大2倍
                const speedEffect = Math.max(0.2, speed / 2000);
                let width = baseWidth * pressureEffect * speedEffect;
                console.log('speed', `speed=${speed}, baseWidth=${baseWidth}, width=${width}, pressTime=${pressTime}`);
                return baseWidth * pressureEffect * speedEffect;
            },
            //添加路径
            pathsAdd(path, isDraw=false){
                this.paths.push(path);
                if(isDraw){
                    this.drawPath(path);
                }
            },
            //绘制路径
            drawPath(path){
                if(path.type === 'lasso'){
                    this.drawFeatherPolygon(path);
                }else{
                    this.drawPathLine(path);
                }
                this.callFuncUpdate();
            },
            // 羽化并填充多边形
            drawFeatherPolygon(path) {
                let points = path.points;
                let ctx = this.dom_ctx;
                ctx.filter = `blur(${path.featherValue}px)`; // 设置模糊效果
                ctx.beginPath();
                ctx.moveTo(points[0].x, points[0].y);
                for (let i = 1; i < points.length; i++) {
                    const dx = points[i].x - points[i - 1].x;
                    const dy = points[i].y - points[i - 1].y;
                    const length = Math.sqrt(dx * dx + dy * dy);
                    const angle = Math.atan2(dy, dx);
                    const featherX = points[i - 1].x + Math.cos(angle) * path.featherValue; // 羽化半径
                    const featherY = points[i - 1].y + Math.sin(angle) * path.featherValue; // 羽化半径
                    ctx.lineTo(featherX, featherY);
                }
                ctx.closePath();
                ctx.fillStyle = path.fillColor; // 羽化颜色
                ctx.fill();
                ctx.filter = 'none'; // 重置滤镜
            },
            // 绘制路径
            drawPathLine(path, isTempCtx=false) {
                if (!path || !path.points || path.points.length < 1) return;
                let ctx = isTempCtx ? this.dom_ctx_temp : this.dom_ctx;
                ctx.save();

                let points = path.points;
                ctx.beginPath();
                ctx.strokeStyle = path.color || this.currentBrushColor;
                ctx.lineWidth = path.width || this.currentLineWidth;
                ctx.lineCap = 'round';
                ctx.lineJoin = 'round';

                if (points.length === 1) {
                    // 如果路径只有一个点，则画一个圆点
                    ctx.arc(points[0].x, points[0].y, path.width || this.currentLineWidth / 2, 0, 2 * Math.PI);
                    ctx.fillStyle = path.color || this.currentBrushColor;
                    ctx.fill();
                } else {
                    ctx.moveTo(points[0].x, points[0].y);

                    if (path.type === 'brush') {
                        // 毛笔效果
                        for (let i = 1; i < points.length; i++) {
                            // ctx.globalAlpha = 1;
                            ctx.lineWidth = points[i].width;
                            ctx.lineTo(points[i].x, points[i].y);
                            ctx.stroke();
                            ctx.beginPath();
                            ctx.moveTo(points[i].x, points[i].y);
                        }
                    } else {
                        // 普通画笔效果
                        for (let i = 1; i < points.length - 2; i++) {
                            const xc = (points[i].x + points[i + 1].x) / 2;
                            const yc = (points[i].y + points[i + 1].y) / 2;
                            ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
                        }
                    }
                    ctx.stroke();
                }
                ctx.restore();
            },

            // 工具方法：转换颜色格式
            hexToRgb(hex) {
                const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
                return result ? {
                    r: parseInt(result[1], 16),
                    g: parseInt(result[2], 16),
                    b: parseInt(result[3], 16)
                } : null;
            },
            //清空画布
            canvasClearEmpty(isTemp=false){
                let ctx = isTemp ? this.dom_ctx_temp : this.dom_ctx;
                ctx.fillStyle = 'transparent';
                ctx.clearRect(0, 0, this.dom_canvas.width, this.dom_canvas.height);
                ctx.save();
            },
            // 绘制图像
            drawImage() {
                let ctx = this.dom_ctx;
                // 清空画布
                this.canvasClearEmpty();

                // 绘制图片
                if (this.currentImage) {
                    ctx.drawImage(this.currentImage, 0, 0, this.dom_canvas.width, this.dom_canvas.height);
                }

                ctx.restore();

                // 绘制所有路径
                this.paths.forEach((path, index) => {
                    this.drawPath(path);
                    if (this.selectedPaths.has(index)) {
                        this.drawPathBoundingBox(path);
                    }
                });

                // 绘制选择框
                if (this.selectionBox) {
                    this.drawSelectionBox();
                }

                // 更新删除按钮位置
                this.updateDeleteButtons();
                this.callFuncUpdate();
            },
            // 绘制路径边界框
            drawPathBoundingBox(path) {
                const bounds = this.getPathBounds(path);
                if(!bounds) return;
                let ctx = this.dom_ctx;
                ctx.save();
                ctx.strokeStyle = '#0066ff';
                ctx.setLineDash([5, 5]);
                ctx.strokeRect(bounds.minX - 5, bounds.minY - 5,
                                  bounds.maxX - bounds.minX + 10,
                                  bounds.maxY - bounds.minY + 10);
                ctx.restore();
            },
            // 获取路径边界
            getPathBounds(path) {
                if (!path || path.length < 1) return;
                let minX = Infinity, minY = Infinity;
                let maxX = -Infinity, maxY = -Infinity;
                path.points.forEach(point => {
                    minX = Math.min(minX, point.x);
                    minY = Math.min(minY, point.y);
                    maxX = Math.max(maxX, point.x);
                    maxY = Math.max(maxY, point.y);
                });
                return { minX, minY, maxX, maxY };
            },
            // 绘制选择框
            drawSelectionBox() {
                let ctx = this.dom_ctx;
                const rect = this.dom_canvas.getBoundingClientRect();
                const startX = (this.selectionStart.x - rect.left) / this.scale;
                const startY = (this.selectionStart.y - rect.top) / this.scale;
                const endX = (this.selectionBox.x - rect.left) / this.scale;
                const endY = (this.selectionBox.y - rect.top) / this.scale;

                ctx.save();
                ctx.fillStyle = 'rgba(0, 102, 255, 0.1)';
                ctx.fillRect(
                    Math.min(startX, endX),
                    Math.min(startY, endY),
                    Math.abs(endX - startX),
                    Math.abs(endY - startY)
                );
                ctx.strokeStyle = '#0066ff';
                ctx.lineWidth = 1; // 设置边框线宽为1px
                ctx.strokeRect(
                    Math.min(startX, endX),
                    Math.min(startY, endY),
                    Math.abs(endX - startX),
                    Math.abs(endY - startY)
                );
                ctx.restore();
            },
            // 创建删除按钮
            createDeleteButton(pathIndex, x, y) {
                const btn = document.createElement('button');
                btn.className = 'ksa-piceditor-delete-btn';
                btn.innerHTML = '×';
                btn.style.left = `${x}px`;
                btn.style.top = `${y}px`;
                btn.addEventListener('mousedown', (e) => { // 使用 addEventListener
                    this.paths.splice(pathIndex, 1);
                    this.selectedPaths.delete(pathIndex);
                    this.drawImage();
                    this.updateDeleteButtons();
                    e.stopPropagation();
                });
                this.dom_canvas_wrapper.appendChild(btn);
                return btn;
            },
            // 更新删除按钮位置
            updateDeleteButtons() {
                this.removeDeleteButtons();
                this.selectedPaths.forEach(pathIndex => {
                    const path = this.paths[pathIndex];
                    const bounds = this.getPathBounds(path);
                    if(!bounds){
                        return;
                    }
                    const x = bounds.maxX;
                    const y = bounds.minY;
                    this.createDeleteButton(pathIndex, x, y);

                });
            },
            // 移除所有删除按钮
            removeDeleteButtons() {
                const buttons = this.dom_canvas_container.querySelectorAll('.ksa-piceditor-delete-btn');
                buttons.forEach(btn => btn.remove());
            },
            // 撤销功能
            undo() {
                if (this.paths.length > 0) {
                    this.paths.pop();
                    this.drawImage();
                }
            },
            polygon_start(x, y) {
                if(this.polygon.isDrawing){
                    return;
                }
                if(this.polygon_points.length){
                    this.canvasClearEmpty(true);
                    this.polygon_points = [];
                    return;
                }

                this.polygon_points.push({ x, y });
                this.polygon_GroupPoint.push(this.polygon_points);
                this.polygon.isDrawing = true;
                this.dom_ctx_temp.beginPath();
                this.dom_ctx_temp.moveTo(x, y);
                this.dom_ctx_temp.strokeStyle = this.lineColor;
                this.dom_ctx_temp.lineWidth = this.lineWidth;
                this.dom_ctx_temp.stroke();
            },
            // 继续绘制多边形
            polygon_continue(x, y) {
                if (this.polygon.isDrawing) {
                    let lastPoint = this.polygon_points[this.polygon_points.length - 1];
                    if(lastPoint.x === x && lastPoint.y === y){
                        return;
                    }
                    this.polygon_points.push({ x, y });
                    this.dom_ctx_temp.lineTo(x, y);
                    this.dom_ctx_temp.strokeStyle = this.polygon.lineColor; // 确保每次绘制线段时都设置线条颜色
                    this.dom_ctx_temp.lineWidth = this.polygon.lineWidth; // 确保每次绘制线段时都设置线条宽度
                    this.dom_ctx_temp.stroke();
                }
            },
            // 完成绘制多边形
            polygon_end() {
                if (this.polygon.isDrawing) {
                    // 连接多边形的起点和终点
                    this.polygon_continue(this.polygon_points[0].x, this.polygon_points[0].y);
                    this.pathsAdd({
                        type : 'lasso', //类型 羽化
                        featherValue : this.featherValue, //羽化值
                        fillColor : this.featherColor, //填充颜色
                        points : this.polygon_points,
                    }, true);
                    this.polygon.isComplete = true;
                    this.polygon.isDrawing = false;

                }
            },
            // 取消绘制多边形
            polygon_cancel() {
                this.polygon_points = [];
                this.polygon.isDrawing = false;
                this.polygon.isComplete = false;
                this.canvasClearEmpty(true);
            },
        }
});